<template>
  <!-- HTML结构：要求template里面，有且有一个跟标签 -->
  <div>
    <h2>这是根组件</h2>
    <!-- 插值表达式，也叫大胡子，小胡子语法 -->
    <!-- 支持写表达式 -->
    <p>姓名：{{ uname.toUpperCase() + '你好'}}</p>
    <p>年龄：{{age}}</p>
    <p>{{flag ? '1111' : 222}}</p>
    <!-- 标签的 v-html 属性， 相当于innerHTML 的意思 -->
    <p v-html="info">简介：</p>
     <!-- 标签的 v-text 属性， 相当于innerText 的意思 -->
    <p v-text="uname">xxx</p>
  </div>
</template>

<script>
// javaScript
export default {
  //对象里面可以写很多东西，比data ,methods,computed,watch,components...
  //data 用于存放数据：写法上要求data定义成函数，函数里返回一个对象，所有的数据都放到这个返回对象中
  data () {
    return {
      // 页面中用的数据都放在这里
      uname:'zhangsan',
      age:30,
      flag:true,
      info:'这是一名非常<strong>优秀</strong>的boy'
    }
  }
}
</script>

<style>
/* css样式 */
</style>